<!--
	作者：ZhangXin
	时间：2020-07-25
	描述：重置密码页面
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments::head(~{::title})">
	<title>重置密码</title>
</head>
	<body>

		<br>
		<br>
		<br>
		<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
			<div class="ur container">
				<div class="ui success message" th:unless="${#strings.isEmpty(successMessage)}">
					<i class="close icon"></i>
					<div class="" th:text="${successMessage}">提示：操作成功！</div>
				</div>
				<div class="ui negative message" th:unless="${#strings.isEmpty(errorMessage)}">
					<i class="close icon"></i>
					<div class="" th:text="${errorMessage}">提示：操作失败！</div>
				</div>
				<div class="ui middle aligned center aligned grid">
					<div class="column">
						<h2 class="ui teal image header">
           <div class="content">
                          重置密码
           </div>
         </h2>
						<form class="ui large form" method="post" action="#" th:action="@{/resetpassword}">
							<div class="ui  segment">
								<div class="field">
									<div class="ui left icon input">
										<i class="user icon"></i>
										<input type="text" name="username" placeholder="用户名">
									</div>
								</div>
								<div class="field">
									<div class="ui left icon input">
										<i class="mail icon"></i>
										<input type="text" id="email" name="email" placeholder="注册时使用的邮箱">
									</div>
								</div>
								<div class="field">
									<div class="two fields">
										<div class="field" style="text-align: left">
											<a href="#" th:href="@{/login}">登录</a>
										</div>
										<div class="field" style="text-align: right">
											<a href="#" th:href="@{/register}">新用户注册</a>
										</div>
									</div>

								</div>
								<button class="ui fluid large teal submit button">重  置</button>
							</div>

							<div class="ui error mini message"></div>

						</form>

					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

		<script>
			$('.ui.form').form({
				fields: {
					username: {
						identifier: 'username',
						rules: [{
							type: 'empty',
							prompt: '请输入用户名'
						}]
					},
					email: {
						identifier: 'email',
						rules: [{
							type: 'email',
							prompt: '请输入正确的邮箱'
						}]
					}
				}
			});

			//消息提示关闭初始化
			$('.message .close')
					.on('click', function() {
						$(this)
								.closest('.message')
								.transition('fade');
					});

		</script>
	</body>

</html>